<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Read Demo</title>
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <style>
        .item{
            border-bottom: 1px dashed #b3b3b3;
            display: flex;
            justify-content: flex-start;
        }
        .item img{
            width: 50px;height: 50px;
            border-radius: 50px;
        }.item .content{
            margin-left: 10px;
        }
        .button{
            width: 32%;
            float: left;
            margin: 0px;
            margin-left: 1%;
            padding: 0px;
            height: 100px;
            display: inline;
            line-height: 100px;
            color: #fff;
            font-size: x-large;
            word-break: break-all;
            word-wrap: break-word;
            margin-bottom: 5px;
            text-align: center;
        }
        a{
            color: white;
            cursor: pointer;
            text-decoration: inherit;
        }
    </style>
<!--    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>-->
    <script src="https://www.w3school.com.cn/jquery/jquery-1.11.1.min.js"></script>
    <script>
        /* http请求基础方法 */
        function request(url,type,data,success,error){
            $.ajax({
                url: url,
                type: type,
                data:JSON.stringify(data),
                dataType: "json",
                contenType:'application/json;charset=utf-8',
                headers:{'Content-Type':'application/json;charset=utf-8'},
                success: success,
                error: error || function (error) {
                    $('#error').html(JSON.stringify(error))
                }
            })
        }

        /* get请求基础方法 */
        function get(url,data,success,error){
            request(url,'get',data,success,error);
        }

        /* post请求基础方法 */
        function post(url,data,success,error){
            request(url,'post',data,success,error);
        }

        function getTaskList(success,error){
            post('getTaskList',{}, function(res){
                if(200 == res.code){
                    var html = "";
                    var list = res.result.info;
                    for (let i = 0; i < list.length; i++) {
                        const item = list[i];
                        html += `<div class="item">
                                <div class="logo"><img src="${item.img_url}" alt=""></div>
                                <div class="content">${item.describe}</div>
                            </div>`;
                    }
                    $('#list').html(html)
                }else{
                    $('#list').html(JSON.stringify(res))
                }

            });
        }

        function getReadTask(success,error){
            post('getReadTask',{}, function(res){
                /*res  = {
                    "code": 200,
                    "msg": "领取成功，链接已经复制到粘贴板，请在已授权的微信内打开此链接，进入微信完成任务。偶尔点击文章底部点赞、再看，将提高质量分，可阅读更多文章哦~",
                    "result": {
                        "url": "https://www.qianhe888.com/business/sdk/v1/read/we_chat/1631f9ee2886ea2e5e2d47a4fb31f6ffMTE3MA==",
                        "number": 1
                    }
                }*/
                if(res.code == 200){
                    var html = `<p>${res.msg}</p><a href="${res.result.url}">开始任务</a>`;
                    $('#task').html(html)
                }else{
                    $('#task').html(JSON.stringify(res))
                }
            });
        }
    </script>
</head>
<body>
    <div id="list"></div>
    <div id="task"></div>
    <div id="error"></div>

    <div class="button" style="background-color: #FF7F24">
        <a href="javascript:;" onclick="getTaskList()">任务列表</a>
    </div>
    <div class="button" style="background-color:#698B22">
        <a href="javascript:;" onclick="getReadTask()">一键领取</a>
    </div>
</body>
</html>
